<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.mydiv {
			width: 300px;
			height: 200px;
			border: 1px solid;
			position: absolute;
			left: 50%;
			top: 50%;
			margin: -100px 0 0 -150px;
		}
	</style>

	<body>
		<div class="mydiv">居中div</div>
		CSS实现水平和垂直居中 要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，
		距离页面窗口左边框和上边框的距离设置为50%， 这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。 
		
		该方法使用普遍，但是前提是必需设置DIV的宽度和高度。如果当页面DIV宽度和高度是动态的， 比方说需要弹出一个DIV层并且要居中显示，
		DIV的内容是动态的，所以宽度和高度也是动态的，这时需要用jQuery可以解决居中。
	</body>

</html>